<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-28 23:10
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div
    :key="data.id"
    class="x-render-drag-table-group x-render-drag-table-drag-item"
    :class="{'x-render-drag-table-item-active':xDesignTable.currentId === data.id}"
    :style="containerHeight"
    @click.stop.prevent="xDesignTable.currentId = data.id"
  >
    <div class="x-render-drag-table-item">
      <span>{{ data.title }}</span>
      <div>
        <a-tooltip placement="top" title="删除">
          <a-button
            key="delete"
            icon="delete"
            type="link"
            size="small"
            style="color:#f44;"
            @click.stop.prevent="$emit('remove',data)"
          />
        </a-tooltip>
      </div>
    </div>
    <vue-draggable
      v-model="children"
      :options="draggableOptions"
      tag="div"
      class="x-render-drag-table-group-container"
    >
      <template v-for="item in children">
        <component v-if="item.isGroup" is="XRenderColumnGroupDraggable" :key="item.id" :data="item" v-on="$listeners"></component>
        <Column v-else :key="item.id" :data="item" v-on="$listeners"></Column>
      </template>
    </vue-draggable>
  </div>
</template>

<script>
import Column from './column'
import {cloneDeep} from 'lodash'
import {getTableColumnOption} from '../../../../../libs/utils'

export default {
  name: 'XRenderColumnGroupDraggable',
  inject: ['xDesignTable'],
  components: {
    Column
  },
  props: {
    data: {
      type: Object
    }
  },
  computed: {
    draggableOptions: {
      get() {
        return {
          group: 'XRenderTableColumn',
          sort: true,
          animation: 300,
          draggable: '.x-render-drag-table-drag-item',
          handler: '.x-render-drag-table-drag-item',
          disabled: false
        }
      }
    },
    containerHeight: {
      get() {
        const {children, data} = this
        const maxLevel = this.getCurrentGroupLevel(children)
        return {'height': (maxLevel + 1 - data.level) * 80 + 'px'}
      }
    },
    children: {
      get() {
        const {data} = this
        return data.children || []
      },
      set(list) {
        const {xDesignTable, data} = this
        const option = getTableColumnOption(xDesignTable.tableColumnOptions, data.id)
        const tmpList = cloneDeep(list)
        for (const tmp of tmpList) {
          tmp.level = (data.level || 1) + 1
          tmp.parentId = data.id
        }
        option.children.splice(0, option.children.length, ...tmpList)
      }
    }
  },
  methods: {
    // 获取当前组的层级，最大具有几层
    getCurrentGroupLevel(children) {
      const {data} = this
      if (children.length === 0) {
        return data.level
      }
      let maxLevel = 1
      // 递归遍历
      const doGetCurrentLevel = function (parent) {
        if (!parent.isGroup) {
          return
        }
        for (const child of parent.children) {
          const level = child.level
          if (maxLevel < level) {
            maxLevel = level
          }
          doGetCurrentLevel(child)
        }
      }

      doGetCurrentLevel({isGroup: true, children: cloneDeep(children)})
      return maxLevel
    }
  }
}
</script>

<style scoped lang="css">
.x-render-drag-table-group {
  display: grid;
  grid-template-rows: 30px 40px;
  grid-row-gap: 8px;
  border: 1px dashed #cccccc;
  margin: 4px;
}

.x-render-drag-table-group-container {
  display: flex;
  flex-flow: row nowrap;
}

.x-render-drag-table-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border: 1px solid #409eff;
  margin: 4px;
  padding: 0 4px;
  min-width: 200px;
  min-height: 30px;
}


.x-render-drag-table-item-active {
  border: 1px dashed #409eff;
}
</style>
